
import { Image, List } from 'antd-mobile'
import React from 'react'

import {useNavigate} from 'react-router-dom'
function Mylist() {
    let nav=useNavigate() 
    let users = [
        {
            id: '1',
            avatar:
                'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
            name: '张三',
            description: 'Deserunt dolor ea eaque eos',
        },
        {
            id: '2',
            avatar:
                'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9',
            name: '李四',
            description: 'Animi eius expedita, explicabo',
        },
        {
            id: '3',
            avatar:
                'https://images.unsplash.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
            name: 'Marco Gregg',
            description: 'Ab animi cumque eveniet ex harum nam odio omnis',
        },
        {
            id: '4',
            avatar:
                'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
            name: 'Edith Koenig',
            description: 'Commodi earum exercitationem id numquam vitae',
        },
        {
            id: '5',
            avatar:
                'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
            name: 'Novalee Spicer',
            description: 'Deserunt dolor ea eaque eos',
        },
        {
            id: '6',
            avatar:
                'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9',
            name: 'Sara Koivisto',
            description: 'Animi eius expedita, explicabo',
        },
        {
            id: '7',
            avatar:
                'https://images.unsplash.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
            name: 'Marco Gregg',
            description: 'Ab animi cumque eveniet ex harum nam odio omnis',
        },
        {
            id: '8',
            avatar:
                'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
            name: 'Edith Koenig',
            description: 'Commodi earum exercitationem id numquam vitae',
        },
    ]
let todetail=(sjitem)=>{
    nav(`/detail?'avatar':${sjitem.avatar}&'name':${sjitem.name}&'description':${sjitem.description}`)
}
   
    return (
        <div>
            <List header='用户列表'>
                { users.map((item,index) => (
                    <List.Item
                        key={index}
                        prefix={
                            <Image
                                src={item.avatar}
                                style={{ borderRadius: 20 }}
                                fit='cover'
                                width={40}
                                height={40}
                            />
                        }
                        description={item.description}

                        onClick={()=>todetail(item)}
                    >
                        {item.name}
                    </List.Item>
                ))}
            </List>
        </div>
    )
}

export default Mylist
